<template>
	<view style="width: 100vw;">
		<view v-for="(item3,index3) in menulist" :key="index3">
				<view class='menu_text'>{{item3.menuname}}</view>
				<view v-if="JSON.stringify(item3.children) != undefined" class='cq_nav'>
					<view v-for="(item,index) in item3.children" :key="index">
						
						<view  class='cq_nav' @click='navigatetocom(item)' style="display: flex;position: relative;">
							<view class='cq_nav_item' >
								<image class='cq_nav_item_image' :src='item.piciconurl'></image>
								<text class='cq_nav_item_text'>{{item.menuname}}</text>
							</view>
							<view v-if="item.visble" class="iconfont icon-jia" ></view>
						</view>
					</view>
				</view>
				
			</view>
		
		
		<tabbar :value2='2'></tabbar>
	</view>
</template>

<script>
	var util = require("../../utils/util.js");
	var common = require("../../utils/api/common.js")
	var infolistutil = require("../../utils/infolistutil.js");
	var processInitialData = require("../../utils/processInitialData.js")
	import tabbar from "@/components/tabbar/tabbar.vue"
	export default {
		components:{
			tabbar:tabbar,
		},
		
		data() {
			return {
				preoptions:{},
				menulist:[],
				commonmod:[],
				pageConditions:{"pageNumber": 1,"rowsPerPage": 20,"isAllData": true},
			}
		},
		onLoad:async function(options){
			uni.hideTabBar()
			var that = this
			var preoptions = {}
			preoptions['pagename'] = 'appsj_menubill'
			preoptions['templatename'] = 'appsj_menubill'
			preoptions['modid'] = 'appsj_menubill'
			preoptions['menuid'] = ''
			that.preoptions = preoptions
			that.$options.methods.initial(that)
			let  i18n = uni.getStorageSync('i18n')
			if(i18n === 'en'){
				uni.setNavigationBarTitle({'title':'Billing'})
			}
		},
		onPullDownRefresh:async function(){
			var that = this
			that.$options.methods.initial(that)
			uni.stopPullDownRefresh()
		},
		
		methods: {
			async initial(that){
				var injson = common.requestStylePre(that.preoptions)
				var url = getApp().globalData.app_address + '?method=saas_PageStyle&parse=json'
				const { data: res } = await infolistutil.post2(url, injson);
				var result = res;
				console.log(result)
				var div = result.data.div
				for(var i=0; i<div.length; i++){
					var divArea = div[i].divArea
					var style = div[i].style
					var dataObject = style.dataObject
					var replaceConditions = {}
					var divreplaceColumns = style.replaceColumns==undefined?[]:style.replaceColumns
					replaceConditions = processInitialData.replaceConditionstrans(replaceConditions, divreplaceColumns,'','')
					var injson = common.requestDataPre(that.preoptions,divArea,dataObject,replaceConditions,{},that.pageConditions)
					var url = getApp().globalData.app_address + '?method=saas_PageDivData&parse=json'
					const { data: res } = await infolistutil.post2(url, injson);
					var result = res;
					if (result.rtn != 1) {
						uni.reLaunch({url: '/pages/first/first'});
						return
					}
					if (result.data != '') {
						that.commonmod = result.data.div.value
						if (JSON.stringify(that.commonmod) != '[]') {
							var tempcommonmod = that.commonmod
							for (var i = 0; i < tempcommonmod.length; i++) {
								tempcommonmod[i].piciconurl = getApp().globalData.pic_address +
									tempcommonmod[i].piciconurl
							}
							var id = ''
							var pid = ''
							that.menulist = util.structureTreeData(tempcommonmod, id = "menuid", pid ="parentmenuid")
						}
					}
					console.log(that.menulist)
				}
			},
			
			
			navigatetocom(item){
				var that = this
				console.log(item)
				var templatename = item.templetname
				var pagename = item.pagename
				var menuid = item.menuid
				var menuname = item.menuname
				var modid = item.modid
				if(templatename == 'appsj_list'){
					uni.navigateTo({url:'/pages/infolist/infolist?templatename='+templatename+'&pagename='+pagename+'&menuid='+menuid+'&menuname='+menuname+'&modid='+modid})
				}else if(templatename == 'appsj_tab'){
					var url = `/pages/tab/tab`
							 +`?templetname=${templatename}`
							 +`&pagename=${pagename}`
							 +`&menuid=${menuid}`
							 +`&menuname=${menuname}`
							 +`&modid=${modid}`
							 +`&tabs=${JSON.stringify(item.children)}`
					uni.navigateTo({url:url})
				}
			},
		},
	}
</script>

<style>
	::-webkit-scrollbar {width: 0;height: 0;color: transparent;}
	.menu {display: flex;	}
	.menu.active {color: #E08140;position: relative;background: #ffffff;}
	.menu_left {	width: 10rpx;background: #E08140;padding: 30rpx 0 30rpx 0;}
	.menu_text {text-align:left;padding-bottom:10rpx;margin-left: 10rpx;font-size: 28rpx;}
	.cq_nav {padding:5rpx 20rpx;display: flex;flex-wrap: wrap;justify-content: flex-start;margin-left: -20rpx;margin-right: -20rpx;}
	.cq_nav1 {display: flex;position: relative;	}
	.cq_nav_item {width: 160rpx;height: 170rpx;display: flex;flex-direction: column;align-content: center;align-items: center;margin-left: 20rpx;}
	.cq_nav_item_image {width: 96rpx;height: 96rpx;margin-top: 23rpx;}
	.cq_nav_item_text {color: #333333;font-size: 22rpx;margin: 10rpx 0 10rpx 0;white-space:normal; overflow: hidden; overflow-x: hidden; overflow-y: hidden; text-overflow: ellipsis;  display: -webkit-box;  -webkit-box-orient: vertical;-webkit-line-clamp: 1;}
	
</style>